<template>
  <div class="count">
    <h2>当前求和为 {{ sum }}, 放大十倍后: {{ bigSum }}</h2>
    <h2>当前的学校是: {{ school }}</h2>
    <select v-model.number="n"> <!-- 也可以在这v-model上面加上 .number -->
      <option :value="1">1</option> <!-- 加上 : 表示的是表达式 -->
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name = "Count">
import {ref, reactive} from 'vue'
import { useCountStore } from '@/store/count'
import { storeToRefs } from 'pinia'  // 只关乎数据
//------------------数据---------------------
const countStore = useCountStore() // 函数 类似hooks
console.log(countStore.sum); // 拿到厂库里面的数据
const {sum, school, bigSum} = storeToRefs(countStore) // 他只会把数据给refs话 其余都不管
let n = ref(1) // 当前用户选择的数字


//---------------------函数----------------------
function add() {
  // 第一种修改方式
  countStore.increment(n.value)
}

function minus() {
  countStore.sum -= n.value
}



</script>

<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
select, button {
  margin: 0 5px;
  height: 25px;
}
</style>